一文详解websocket在vue2中的封装使用 |
您所在的位置：网站首页 › vue video播放次数 › 一文详解websocket在vue2中的封装使用 |
一文详解websocket在vue2中的封装使用
|
目录websocket在vue2中的封装使用实现思路：步骤页面中使用方式在vue中的封装websocket在vue2中的封装使用先说需求：页面中有websocket连接，进入的时候发送参数到后端，后... 目录websocket在vue2中的封装使用实现思路：步骤页面中使用方式在vue中的封装websocket在vue2中的封装使用先说需求： 页面中有websocket连接，进入的时候发送参数到后端，后端发送消息， 离开页面时发送参数至后端，后端停止发送消息，不得断开连接， 下一次进入时页面时不用再次连接。 实现思路： 因为是全局连接一个websocket，所以这里采用单例模式也是因为封装的原因，页面中肯定是直接拿不到onmessage中返回的数据， 所以这里采用发布订阅模式来做完整代码在最后，不想看我废话的可以直接扒拉了 步骤步骤就是： 连接，页面发送消息，接收消息，over ~ 首先定义连接websocket的方法 export default class SocketService { constructor(url){ this.url = url }, connect() { //判断浏览器是否支持websocket if (!window.WebSocket) { return console.log("您的浏览器不支持WebSocket"); } url, //连接websocket this.ws = new WebSocket(this.url); //监听websocket各种状态 this.ws.onopen = () => {}; this.ws.onclose = () => {}; this.ws.onerror = () => {}; this.ws.onmessage = (e) => {}; } }我们先让socket连接上叭 export default class SocketService { constructor(url， againConnect = true){ this.url = url this.againConnect = againConnect; }, ws = null; // 和服务端连接的socket对象 url; //地址 againConnect; //标识断开是否重连 connected = false; // 标识是否连接成功 sendRetryCount = 0; // 记录重试的次数 connectRetryCount = 0; // 重新连接尝试的次数 connect() { //判断浏览器是否支持websocket if (!window.WebSocket) { return console.log("您的浏览器不支持WebSocket"); } url, //连接websocket this.ws = new WebSocket(this.url); //监听websocket各种状态 this.ws.onopen = () => { //连接上后所有标识清零 this.connected = true; this.connectRetryCount = 0; }; this.ws.onclose = () => { //连接关闭 this.connected = false; this.connectRetryCount++; if (this.againConnect) { //重连 setTimeout(() => { this.connect(); }, 500 * this.connectRetryCount); } else { //不重连的操作 sessionStorage.clear(); localStorage.clear(); message.error("登录超时"); router.push("/"); } }; this.ws.onerror = () => { //连接失败 this.connected = false; this.connectRetryCount++; if (this.againConnect) { setTimeout(() => { this.connect(); }, 500 * this.connectRetryCount); } }; this.ws.onmessage = (e) => { console.log(e) }; }, unSubscribe() {} send(){ //发送消息的方法 } }那么我们要怎么给后端发送消息呢,发送了消息之后我们又该怎样才能在页面中接收到消息呢? 在send方法中接收一个回调函数， 在message中调用， subscribeList = {}; //记载回调函数 idList = []; send(data, callback) { //判断此时有没有ws if (!this.ws) { this.connect(); this.send(data, callback); } else { // 判断此时此刻有没有连接成功 if (this.connected) { this.sendRetryCount = 0; this.ws.send(jsON.stringify(data)); if (data.type === "sub") { //存储id this.idList.push(data.id); //存储回调函数, if (!this.subscribeList[data.id]) { this.subscribeList[data.id] = [callback]; } else { this.subscribeList[data.id].push(callback); } } } else { this.sendRetryCount++; setTimeout(() => { this.send(data, callback); }, this.sendRetryCount * 500); } } } connect(){ ...... this.ws.onmessage = (e) => { let { payload, requestId, type } = JSON.parse(e.data); if (type === "error") { console.log("出错了"); } if (this.subscribeList[requestId]) { if (type === "complete") { console.log("完成了"); } else if (type === "result") { this.subscribeList[requestId].forEach((item) => item.call(this, payload) ); } } }; } //销毁回调函数 unSubscribe() { //停止消息发送 this.idList.forEach((item) => { this.send({ id: item, type: "unsub" }); delete this.subscribeList[item]; }); this.idList = []; } sub标识发送消息， unsub标识停止发送消息id为事件的标识符现在解决了页面中接收消息的问题，那么怎么保证离开页面，回到页面，使用的是同一个websocket呢，如果实例化这个类的话，那么每次进入都会实例化SocketService， es6的class中有取值函数和存值函数， 具体使用请看这里： Class 的基本语法 - ES6 教程 - 网道 (wangdoc.com) instance = null; static get Instance() { if (!this.instance) { this.instance = new SocketService(false); } return this.instance; } 使用getter，来拿取class中的instance，拿取的时候设置拦截该行为，判断instance有没有值，没有值就实例化SocketService给instance，返回instance， 页面中使用方式 import SocketService from "@/websocket/websocket"; mounted() { this.ws = SocketService.Instance; this.ws.send( { id: "11111", topic: "/xxx/xxx", parameter: {}, type: "sub", }, this.Callback ); } destroyed() { this.ws.unSubscribe(); }, methods:{ Callback(data) { console.log(data); }, }看到这里了，不妨给个小心心叭 在vue中的封装 export default class SocketService { constructor(againConnect = true, url) { this.url = url; this.againConnect = againConnect; } instance = null; //页面中使用的SocketService实例 ws = null; // 和服务端连接的socket对象 url; //地址 againConnect; //断开是否重连 connected = false; // 标识是否连接成功 sendRetryCount = 0; // 记录重试的次数 connectRetryCount = 0; // 重新连接尝试的次数 //单例模式保证只有一个SocketService实例 static get Instance() { if (!this.instance) { this.url = '......' this.instance = new SocketService(false, url); } return this.instance; } // 定义连接服务器的方法 connect() { // 这里判断你的浏览器支不支持websocket if (!window.WebSocket) { return console.log("您的浏览器不支持WebSocket"); } this.ws = new WebSocket(this.url); //连接上了 this.ws.onopen = () => { this.connected = true; // 重置重新连接的次数 this.connectRetryCount = 0; }; //连接关闭了，设置标识值为false， this.ws.onclose = () => { this.connected = false; this.connectRetryCount++; if (this.againConnect) { setTimeout(() => { this.connect(); }, 500 * this.connectRetryCount); } else { sessionStorage.clear(); localStorage.clear(); message.error("登录超时"); router.push("/"); } }; this.ws.onerror = () => { console.log("socket连接失败"); this.connected = false; this.connectRetryCount++; if (this.againConnect) { setTimeout(() => { this.connect(); }, 500 * this.connectRetryCount); } }; this.ws.onmessage = (e) => { let { payloadwww.cppcns.com, requestId } = JSON.parse(e.data); if (this.subscribeList[requestId]) { this.subscribeList[requestId].forEach((item) => item.call(this, payload) ); } }; } //销毁回调函数 unSubscribe() { //停止消息发送 this.idList.forEach((item) => { this.send({ id: item, type: "unsub" }); delete this.subscribeList[item]; }); this.idList = []; } subscribeList = {}; //记载回调函数 idList = []; // 发送数据的方法 send(data, callback) { //判断此时有没有ws if (!this.ws) { this.connect(); this.send(data, callback); } else { // 判断此时此刻有没有连接成功 if (this.connected) { this.sendRetryCount = 0; this.ws.send(JSON.stringify(data)); if (data.type === "sub") { //存储id this.idList.push(data.id); //存储回调函数, if (!this.subscribeList[data.id]) { this.subscribeList[data.id] = [callback]; } else { this.subscribeList[data.id].push(callback); } } } else { this.sendRetryCount++; setTimeout(() => { this.send(data, callback); }, this.sendRetryCount * 500); } } } }以上就是一文详解websocket在vue2中的封装使用的详细内容，更多关于vue2封装websocket的资料请关注我们其它相关文章！ |
【本文地址】
今日新闻 |
推荐新闻 |